﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="styles.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var compositeTypes = [
                  'source-over', 'source-in', 'source-out', 'source-atop',
                  'destination-over', 'destination-in', 'destination-out', 'destination-atop',
                  'lighter', 'darker', 'copy', 'xor'
            ];
            (function draw() {
                for (i = 0; i < compositeTypes.length; i++) {

                    var li = document.createElement('li');
                    var canvas = document.createElement('canvas');
                    canvas.setAttribute('width', '200');
                    canvas.setAttribute('height', '200');
                    var ctx = canvas.getContext('2d');

                    // draw rectangle
                    ctx.fillStyle = "#09f";
                    ctx.fillRect(0, 0, 100, 100);

                    // set composite property
                    ctx.globalCompositeOperation = compositeTypes[i];

                    // draw circle
                    ctx.fillStyle = "#f30";
                    ctx.beginPath();
                    ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
                    ctx.fill();


                    // draw circle
                    //ctx.fillStyle = "#ccc";
                    //ctx.beginPath();
                    //ctx.arc(50, 100, 50, 0, Math.PI * 2, true);
                    //ctx.fill();


                    var label = document.createTextNode(compositeTypes[i]);

                    li.appendChild(canvas);
                    li.appendChild(label);
                    document.getElementById('wrap').appendChild(li);

                    console.log(ctx.getImageData(0, 0, 200, 200));

                }
            })();
        });
    </script>
</head>
<body>
    <ul id="wrap"></ul>
</body>
</html>
